@ts-nocheck
<template>
  <div class="container" v-loading="loading">
    <configView @fetch="fetchData" />
    <el-tabs v-model="activeTab" @tab-change="saveActiveTab">
      <el-tab-pane label="块视图（按扇区/模块）" name="card" lazy>
        <card-view />
      </el-tab-pane>
      <el-tab-pane label="表视图（按高度）" name="table" lazy>
        <table-view />
      </el-tab-pane>
      <el-tab-pane label="表视图（源数据）" name="raw" lazy>
        <raw-view />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapWritableState } from 'pinia';
import useTransferStore from '@/store/transfer';
import configView from "./config.vue";
import tableView from "./table.vue";
import cardView from "./card.vue";
import rawView from "./raw.vue";
import sourceData from "./sourceData.json";
import { fetchCardData, fetchTableData } from "./fetchData.js";

export default {
  setup() {
    const transferStore = useTransferStore();
    return {
      transferStore,
    }
  },
  components: {
    configView,
    tableView,
    cardView,
    rawView,
  },
  data() {
    return {
      sourceData,
      activeTab: "card",
      loading: false,
      // showContent: false,
    };
  },
  computed: {
    ...mapWritableState(useTransferStore, {
      filter: 'filter',
      storedTab: 'activeTab',
      raw: 'raw',
      card: 'card',
      table: 'table',
    }),
    // filter() {
    //   return this.transfer.filter;
    // },
  },
  methods: {
    saveActiveTab() {
      this.storedTab = this.activeTab;
      // console.log('storedTab', this.storedTab);
      // console.log('activeTab', this.activeTab);
    },
    fetchCardData,
    fetchTableData,
    fetchData() {
      this.loading = true;
      // this.showContent = false;
      let t0 = performance.now();
      let filter = this.filter;
      let source = this.sourceData;
      let matchedData = new Array();
      for (let i = 0; i < source.length; i++) {
        if (this.executeFilter(filter, source[i])) {
          matchedData.push(source[i]);
        }
      }
      this.raw = matchedData;
      this.card = fetchCardData(matchedData, filter.selectedSectors);
      this.table = fetchTableData(matchedData, filter.selectedSectors);

      // this.showContent = true;
      this.loading = false;
      let t1 = performance.now();
      let t = t1 - t0;
      // console.log("Call to fetchData took " + t + " milliseconds.");
      this.$notify.success({
        title: "完成",
        message: "找到 " + matchedData.length + " 条数据（耗时" + Math.round(t) + "ms）",
      });
    },
    executeFilter(filter, data) {
      let mode = filter.selectedModes.split(",");
      if (data.direction[0] != "任意" && data.direction[0] != mode[0]) {
        return false;
      }
      if (data.direction[1] != "任意" && data.direction[1] != mode[1]) {
        return false;
      }
      if (
        filter.selectedSectors.indexOf(data.handout) < 0 &&
        filter.selectedSectors.indexOf(data.handin) < 0
      ) {
        return false;
      }
      if (
        filter.ignoreInnerTransfer &&
        filter.selectedSectors.indexOf(data.handout) > -1 &&
        filter.selectedSectors.indexOf(data.handin) > -1
      ) {
        return false;
      }
      //matched
      return true;
    },
  },
  created() {
    this.activeTab = this.storedTab;
  },
};
</script>

<style scoped>
.container {
  padding: 36px 24px;
}
</style>